<template>
	<view class="topicsBox">
		<form class="form" @submit="btnSubmit" @reset="btnReset">
			<!-- 标题 -->
			<view class="titleBox">
				<text>标题：</text>
				<input class="title" name="title" v-model="title" placeholder-style="color:#afafaf" placeholder="请输入标题"
					type="text" @input="titleOnChange">
			</view>
			<!-- 选择图片 -->
			<images-box ref="imagesBox"></images-box>
			<!-- 内容盒子 -->
			<view class="contentBox">
				<text>内容：</text>
				<textarea placeholder="请输入内容" v-model="content" @input="onChange" name="content"
					placeholder-style="color:#afafaf" class="content" type="text" maxlength="200">
				</textarea>
				<view class="textLimit">{{currentNum}}/{{maxLimit}}</view>
			</view>
			<!-- 价格 -->
			<view class="priceBox">
				<text>价格(￥)：</text>
				<input class="price" name="price" type="number" v-model="price" placeholder="请输入价格" placeholder-style="color:#afafaf" />
			</view>
			<!-- 地址盒子 -->
			<view class="addressBox">
				<img @click="chooseAddress"
					src="cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/position.png">
				<input class="address" v-model="address" name="address" placeholder="<-- 点击获取地址(可以自行修改地址)"
					placeholder-style="color:#afafaf" type="text" @input="addressOnChange">
			</view>
			<!-- 提交按钮 -->
			<button class="submit" type="primary" form-type="submit">发布</button>
			<!-- 重置按钮 -->
			<button class="reset" type="default" form-type="reset">重置</button>
		</form>
	</view>
</template>

<script>
	import imagesBox from '@/components/common/imagesBox.vue'

	const app = getApp()

	export default {
		name: "leases",
		components: {
			imagesBox
		},
		props: {
			// 当前分栏的索引
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// 云存储图片缓存地址
				cloudImgsList: [],
				// 内容区域当前的字数
				currentNum: 0,
				// 选中地址
				address: '',
				title: '',
				content: '',
				price:null,
				// 内容区域最大的字数显示
				maxLimit: 200,
				// 标题和地址的字数
				titleNum: 0,
				addressNum: 0,
				// 表单内容
				formData: {}
			}
		},
		methods: {
			// 选地址定位
			chooseAddress() {
				uni.chooseLocation().then((res) => {
					console.log(res);
					this.address = res[1].name
					this.addressNum = res[1].name.length
				})
			},

			// 当内容区域变化时
			onChange(res) {
				this.currentNum = res.detail.value.length
			},
			// 标题和地址的内容发生变化
			titleOnChange(res) {
				this.titleNum = res.detail.value.length
			},
			addressOnChange(res) {
				this.addressNum = res.detail.value.length
			},

			// 判断表单是否填满
			isFullfilled() {
				let imgsList = this.$refs.imagesBox.imgsList
				if (!(this.titleNum && this.currentNum && this.addressNum && imgsList.length)) {
					uni.showToast({
						title: '请完善发布内容',
						icon: 'none'
					})
					return false
				} else {
					return true
				}
			},

			// 上传图片
			uploadImgs() {
				// 随机生成云存储的图片名字
				this.$refs.imagesBox.imgsList.forEach((item) => {
					let preName = this.uuid()
					let imgFormat = item.substring(item.indexOf('.'))
					let imgName = preName + imgFormat
					wx.cloud.uploadFile({
						cloudPath: `shaoPAI plus/${imgName}`,
						filePath: item
					}).then((res) => {
						this.cloudImgsList.push(res.fileID)
						if (this.cloudImgsList.length == this.$refs.imagesBox.imgsList.length) {
							this.addToDatabase()
						}
					})
				})
			},

			// 生成uuid 唯一名字
			uuid() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = Math.random() * 16 | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(16);
				});
			},

			// 把数据添加到用户信息里面
			addToMyRelease(_id, postTime) {
				wx.cloud.callFunction({
					name: 'add_myRelease',
					data: {
						currentIndex: this.currentIndex,
						formData: this.formData,
						cloudImgsList: this.cloudImgsList,
						postTime,
						userInfo: app.globalData.userInfo,
						_id,
						type:3
					}
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					this.currentNum = 0
					this.titleNum = 0
					this.addressNum = 0
					// 使用数据双向绑定清除内容
					this.title = ''
					this.content = ''
					this.address = ''
					this.$refs.imagesBox.imgsList = []
				})
			},
			
			// 调用云函数，将数据提交到数据库
			addToDatabase() {
				const postTime = new Date().getTime()
				wx.cloud.callFunction({
					name: 'add_info_toDatabase',
					data: {
						currentIndex: this.currentIndex,
						formData: this.formData,
						cloudImgsList: this.cloudImgsList,
						postTime,
						userInfo:app.globalData.userInfo,
						type:3
					}
				}).then((res) => {
					this.addToMyRelease(res.result._id, postTime)
					console.log(res);
				})
			},

			// 提交按钮
			btnSubmit(res) {
				// 短震动效果
				uni.vibrateShort()
				let result = app.hasUserInfo()
				// 判断用户是否已经登录
				if (!result) {
					console.log('未登录');
					uni.navigateTo({
						url: '/pages/profile/unlogin'
					})
					return
				}
				uni.showLoading({
					title: '发布中...'
				})
				// 判断表单是否被填满
				const isFullfilled = this.isFullfilled()
				if (!isFullfilled) {
					console.log('没填满');
					return
				}
				this.formData = res.detail.value
				this.uploadImgs()
			},

			// 重置按钮
			btnReset() {
				// 短震动效果
				uni.vibrateShort()
				this.currentNum = 0
				this.titleNum = 0
				this.addressNum = 0
				// 使用数据双向绑定清除内容
				this.title = ''
				this.content = ''
				this.address = ''
				this.$refs.imagesBox.imgsList = []
			}
		}
	}
</script>

<style scoped lang="scss">
	// 最大盒子
	.topicsBox {
		background-color: white;
		width: 100%;
		height: 100vh;
		border-radius: 30rpx 30rpx 0 0;

		// 表单
		.form {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// background-color: aqua;

			// 标题大盒子
			.titleBox {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 700rpx;
				height: 80rpx;
				margin: 20rpx 20rpx;
				// background-color: aquamarine;

				// 文字
				text {
					flex: 2;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: bold;
				}

				// 标题输入框
				.title {
					flex: 8;
					border-bottom: 1rpx solid #efefef;
					width: 90%;
					height: 50rpx;
					margin-left: -30rpx;
				}
			}

			// 内容盒
			.contentBox {
				width: 700rpx;
				margin: 20rpx 20rpx;
				// background-color: aquamarine;

				// 文字
				text {
					flex: 2;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: bold;
				}

				// 内容框
				.content {
					border: 1rpx solid #efefef;
					margin-top: 20rpx;
					width: 680rpx;
					border-radius: 10rpx;
					padding: 10rpx;
				}

				// 字数限制显示
				.textLimit {
					margin: 10rpx 0rpx;
					text-align: right;
					color: #c2c2c2;
				}
			}

			// 价格
			.priceBox {
				width: 700rpx;
				margin-left: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				text {
					flex: 3;
					height: 50rpx;
					font-size: 36rpx;
					font-weight: bold;
				}

				.price {
					flex: 7;
					border-bottom: 1rpx solid #efefef;
					margin-left: -30rpx;
				}
			}

			// 地址
			.addressBox {
				display: flex;
				width: 700rpx;
				height: 50rpx;
				margin-left: 20rpx;
				// background-color: aquamarine;

				// 图片
				img {
					width: 50rpx;
					height: 50rpx;
				}

				// 地址输入框
				.address {
					margin-left: 10rpx;
					border-bottom: 1rpx solid #efefef;
					width: 600rpx;
				}
			}

			// 提交按钮
			.submit {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				background-color: #5a53c8;
				position: fixed;
				z-index: 10;
				right: 30rpx;
				bottom: 180rpx;
				opacity: 0.8;
			}

			// 重置按钮
			.reset {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				background-color: #f0f0f0;
				position: fixed;
				z-index: 10;
				right: 30rpx;
				bottom: 50rpx;
				opacity: 0.8;
			}
		}
	}
</style>
